<script setup>
import { getAllMachine } from '@/api/pannel/machinePannel.js'
import { generateTwoDimensionalArray } from '@/utils/globalMethod'

const machineList = ref([])
const socket = inject('socket')
const loadData = async () => {
  const { machines } = await getAllMachine({ gx: '', lineID: '' })
  machineList.value = generateTwoDimensionalArray(machines, 10)
}

onMounted(loadData)
onMounted(() => {
  socket.receiveMessage('report-system-update', data => {
    setTimeout(async () => {
      await loadData()
    }, 100)
  })
})

onUnmounted(() => {
  socket.removeAllListeners('report-system-update')
})
</script>

<template>
  <div class="ps_w_h_100">
    <el-carousel direction="vertical">
      <el-carousel-item v-for="machine in machineList" :key="machine">
        <div class="machine-list">
          <div
            class="machine-list-item"
            v-for="(item, index) in machine"
            :key="index"
            :class="{
              red: item.zt === '未开工',
              green: item.zt === '生产中' && !item.gxmc.includes('调机'),
              blue: item.gxmc.includes('调机')
            }"
          >
            <div class="jtbh">{{ item.jtbh }}</div>
            <div>{{ item.gxmc }}</div>
            <div>{{ item.sfm }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.machine-list {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;

  &-item {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

    &.red {
      background-color: #c23d3d;
    }

    &.blue {
      background-color: #4472c4 !important;
    }

    &.green {
      background-color: #00b050;
    }
  }
}

:deep(.el-carousel--vertical) {
  width: 100%;
  height: 100%;
}

:deep(.el-carousel__container) {
  width: 100%;
  height: 100%;
}
</style>
